<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>首页 - 后台管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <style>
      .card {
        font-size: 12px !important;
      }
      #channel, #gmv {
        height: 320px !important;
      }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <aside class="lyear-layout-sidebar">
            <div id="logo" class="sidebar-header">
                <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item active">
                            <a href="index.html"><i class="mdi mdi-home"></i>后台首页</a>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>用户数据</a>
                            <ul class="nav nav-subnav">
                                <li><a href="lyear_ui_buttons.html">按钮</a></li>
                                <li><a href="lyear_ui_cards.html">卡片</a></li>
                                <li><a href="lyear_ui_grid.html">格栅</a></li>
                                <li><a href="lyear_ui_icons.html">图标</a></li>
                                <li><a href="lyear_ui_tables.html">表格</a></li>
                                <li><a href="lyear_ui_modals.html">模态框</a></li>
                                <li><a href="lyear_ui_tooltips_popover.html">提示 / 弹出框</a></li>
                                <li><a href="lyear_ui_alerts.html">警告框</a></li>
                                <li><a href="lyear_ui_pagination.html">分页</a></li>
                                <li><a href="lyear_ui_progress.html">进度条</a></li>
                                <li><a href="lyear_ui_tabs.html">标签页</a></li>
                                <li><a href="lyear_ui_typography.html">排版</a></li>
                                <li><a href="lyear_ui_step.html">步骤</a></li>
                                <li><a href="lyear_ui_other.html">其他</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i>订单数据</a>
                            <ul class="nav nav-subnav">
                                <li><a href="lyear_forms_elements.html">基本元素</a></li>
                                <li><a href="lyear_forms_radio.html">单选框</a></li>
                                <li><a href="lyear_forms_checkbox.html">复选框</a></li>
                                <li><a href="lyear_forms_switch.html">开关</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i>平台数据</a>
                            <ul class="nav nav-subnav">
                                <li><a href="lyear_pages_doc.html">文档列表</a></li>
                                <li><a href="lyear_pages_gallery.html">图库列表</a></li>
                                <li><a href="lyear_pages_config.html">网站配置</a></li>
                                <li><a href="lyear_pages_rabc.html">设置权限</a></li>
                                <li><a href="lyear_pages_add_doc.html">新增文档</a></li>
                                <li><a href="lyear_pages_guide.html">表单向导</a></li>
                                <li><a href="lyear_pages_login.html">登录页面</a></li>
                                <li><a href="lyear_pages_login_2.html">登录页面2</a></li>
                                <li><a href="lyear_pages_login_3.html">登录页面3</a></li>
                                <li><a href="lyear_pages_login_4.html">登录页面4</a></li>
                                <li><a href="lyear_pages_error.html">错误页面</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i>系统设置</a>
                            <ul class="nav nav-subnav">
                                <li><a href="lyear_js_datepicker.html">日期选取器</a></li>
                                <li><a href="lyear_js_sliders.html">滑块</a></li>
                                <li><a href="lyear_js_colorpicker.html">选色器</a></li>
                                <li><a href="lyear_js_chartjs.html">Chart.js</a></li>
                                <li><a href="lyear_js_jconfirm.html">对话框</a></li>
                                <li><a href="lyear_js_tags_input.html">标签插件</a></li>
                                <li><a href="lyear_js_notify.html">通知消息</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i>其他功能</a>
                            <ul class="nav nav-subnav">
                                <li><a href="#!">系统设置</a></li>
                                <li class="nav-item nav-item-has-subnav">
                                    <a href="#!">权限管理</a>
                                    <ul class="nav nav-subnav">
                                        <li><a href="#!">二级菜单</a></li>
                                        <li class="nav-item nav-item-has-subnav">
                                            <a href="#!">二级菜单</a>
                                            <ul class="nav nav-subnav">
                                                <li><a href="#!">三级菜单</a></li>
                                                <li><a href="#!">三级菜单</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#!">关于我们</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2021. <a target="_blank" href="http://www.qfedu.com">千锋教育</a>
                        All rights reserved.</p>
                </div>
            </div>
        </aside>

        <header id="header" class="lyear-layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 后台首页 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" :src="'images/users/' + user.avatar"
                                     alt=""/>
                                <span>{{ user.nickname }}<span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a></li>
                                <li><a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a>
                                </li>
                                <li><a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li><a href="" @click.prevent="logout()"><i class="mdi mdi-logout-variant"></i>退出登录</a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                                  <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>                      
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <main id="main" class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6 col-lg-3" v-for="(item, index) in items">
                        <div :class="'card ' + classNames[index]">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">{{ item.name }}</p>
                                    <p class="h3 text-white m-b-0 fa-1-5x">{{ item.value }} {{ item.unit }}</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>渠道 Top10</h4>
                            </div>
                            <div class="card-body" id="channel"></div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>按月交易流水</h4>
                            </div>
                            <div class="card-body" id="gmv"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>股票信息</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>交易日期</th>
                                            <th>开盘价</th>
                                            <th>收盘价</th>
                                            <th>最低价</th>
                                            <th>最高价</th>
                                            <th>交易量</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="stock in stocks">
                                            <td>{{ stock.date }}</td>
                                            <td>{{ stock.open }}</td>
                                            <td>{{ stock.close }}</td>
                                            <td>{{ stock.low }}</td>
                                            <td>{{ stock.high }}</td>
                                            <td>{{ stock.volume }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <nav>
                                        <ul class="pager">
                                            <li><a href="#" @click.prevent="prevPage()">上一页</a></li>
                                            <li><a href="#" @click.prevent="nextPage()">下一页</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-primary" @click="exportExcel()">导出Excel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script>
  if (!localStorage.nickname) {
    window.alert('请先登录')
    location.href = '/lyear_pages_login.html'
  }
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
  let app = new Vue({
    el: '#header',
    data: {
      user: {
        nickname: localStorage.nickname || '',
        avatar: localStorage.avatar || 'avatar.jpg'
      }
    },
    methods: {
      logout() {
        delete localStorage.nickname
        delete localStorage.avatar
        fetch('/user/logout').then(resp => resp.json()).then(json => {
          if (json.code === 10003) {
            location.href = 'lyear_pages_login.html'
          }
        })
      }
    }
  })

  let app2 = new Vue({
    el: '#main',
    data: {
      items: [],
      classNames: ['bg-primary', 'bg-danger', 'bg-success', 'bg-purple'],
      stocks: [],
      currentPage: 1,
      pageSize: 5,
      totalPage: 0
    },
    created() {
      fetch('/api/general_data', {
        credentials: 'include'
      }).then(resp => resp.json()).then(json => {
        this.items = json.results
      })

      this.loadStockData()
    },
    methods: {
      loadStockData() {
        fetch(`/api/stock_data?page=${this.currentPage}&size=${this.pageSize}`, {
          credentials: 'include'
        }).then(resp => resp.json()).then(json => {
          this.stocks = json.results
          this.totalPage = json.total_page
        })
      },
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage -= 1
          this.loadStockData()
        }
      },
      nextPage() {
        if (this.currentPage < this.totalPage) {
          this.currentPage += 1
          this.loadStockData()
        }
      },
      exportExcel() {
        location.href = '/user/export'
      }
    }
  })
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script>
  let pieChart = echarts.init(document.querySelector('#channel'))
  let pieOption = {
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            data: []
        }
    ]
  }
  fetch('/api/channel_data', {
    credentials: 'include'
  }).then(resp => resp.json()).then(json => {
    pieOption.series[0].data = json.results
    pieChart.setOption(pieOption)
  })

  let gmvChart = echarts.init(document.querySelector('#gmv'))
  fetch('/api/gmv_by_month', {
    credentials: 'include'
  }).then(resp => resp.json()).then(json => {
      let gmvOption = {
          legend: {
              data: ['GMV'],
              top: '5%'
          },
          xAxis: {
              type: 'category',
              data: json.x
          },
          yAxis: {
              type: 'value',
              min: 400,
              max: 1200,
              interval: 100
          },
          grid: {
              bottom: '10%'
          },
          series: [
              {
                  name: 'GMV',
                  type: 'line',
                  data: json.y,
                  markPoint: {
                      data: [
                          {type: 'max', name: '最大值'},
                          {type: 'min', name: '最小值'}
                      ]
                  },
                  markLine: {
                      data: [
                          {type: 'average', name: '平均值'}
                      ]
                  }
              }
          ]
      }
      gmvChart.setOption(gmvOption)
  })
</script>
</body>
</html>